<template>
  <view class="content">

    <view class="uni-textarea">
      <textarea v-model="linkValue" class="textarea" placeholder="请输入复制的链接 或 点击粘贴链接按钮"/>
    </view>
    <view class="linkopt">
      <button class="smallBtn bg1" @click="paste">粘贴链接</button>
      <button class="smallBtn bg2" @click="clear">清空链接</button>

    </view>
    <view class="start-parse">
      <button class="start-parse-btn bg4" @click="start">立即解析</button>
    </view>


    <view class="card">
      <navigator url="/pages/toturial/toturial"  hover-class="navigator-hover">

       <view class="card-item">
         <view class="left">
           <image src="/static/book.png" class="img1"></image>
           <text>软件使用说明</text>
         </view>
         <image src="/static/more.png" class="img"></image>
       </view>
      </navigator>
      <navigator url="/pages/history/history"  hover-class="navigator-hover">

        <view class="card-item">
          <view class="left">
            <image src="/static/jilu.png" class="img"></image>
            <text>解析记录</text>
          </view>
          <image src="/static/more.png" class="img"></image>
        </view>
      </navigator>
      <navigator url="/pages/humanvoice/index"  hover-class="navigator-hover">

        <view class="card-item">
          <view class="left">
            <image src="/static/jilu.png" class="img"></image>
            <text>人声分离</text>
          </view>
          <image src="/static/more.png" class="img"></image>
        </view>
      </navigator>
    </view>





  </view>
</template>

<script setup>
import {ref,onLoad} from 'vue'
import parsePlatform from "../../utils/platform";
import request from "../../utils/request";
import {str_md5} from "../../utils/md5";
let globalData = getApp().globalData;
let linkValue=ref('')
let platform=ref('')
let showResult=ref(false)
let tabsheader = ref(['视频', '图片', '文案'])
let m3u8=ref(false)
let tabKey = ref('视频')
let textinfo = ref('')
let imageUrl = ref([])
let videoUrl = ref('')
let videoSize = ref(0)
let audioUrl = ref('')
let jilu = ref([])
async function start() {

  if(!linkValue.value){
    uni.showModal({
      title: '提示',
      content: '链接不能为空',
      showCancel:false,
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定');
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });
    return;
  }

  // request('/start',{

  platform.value = parsePlatform(linkValue.value)
  console.log(platform.value,'sdsd');
  if(platform.value==='bilibili'){
    let bilibili = new Promise(resolve => {
      uni.showModal({
        content:"b站解析视频可能很慢，请耐心等待",
        showCancel:false,
        success(res) {
          resolve()
        }
      })
    })

    await bilibili;
  }

  request(globalData.url+'/start', {
    link: linkValue.value,
    encrypt:str_md5(linkValue.value+'shuiyin')
  }, {}, 'post').then(res => {
    console.log(res);
    if(res.code===200){


      if (['douyin', 'haokan','huya','xhs', 'xigua', 'kuaishou','zhihu','pipix','kg','weibo','acfun','zuiyou','weishi'].includes(platform.value)) {

        videoUrl.value = res.data.video;
        imageUrl.value = res.data.image
        textinfo.value = res.data.title
        if(res.data.isM3u8){
          m3u8.value=true;
        }
      }

      if (['toutiao','bilibili'].includes(platform.value)) {
        imageUrl.value = res.data.image
        textinfo.value = res.data.title
        audioUrl.value = res.data.audio??[]
        videoUrl.value = res.data.video
        videoSize.value = res.data.videoSize


      }


      if (imageUrl.value.length === 0) {
        tabsheader.value = ['视频', '文案']
        tabKey.value = '视频'

      }
      if (videoUrl.value.length === 0) {
        tabsheader.value = ['图片', '文案']
        tabKey.value = '图片'
      }
      if (videoUrl.value.length && imageUrl.value.length) {
        tabsheader.value = ['视频', '图片', '文案']
        tabKey.value = '视频'
      }

      showResult.value = !res.data.err;

      if(res.data.err){
        showResult.value=false
        uni.showModal({
          title: '解析失败！',
          showCancel:false

        });
      }
      // if(imageUrl.value.length===0&&videoUrl.value.length===0&&textinfo.value===''){
      //
      //   showResult.value=false
      //   uni.showModal({
      //     title: '解析失败！',
      //     showCancel:false
      //
      //   });
      // }



      if(showResult.value){
        let jiluvalue = uni.getStorageSync('jilu');
        if(jiluvalue){
          jilu.value=jiluvalue
        }
        uni.navigateTo({
          url: '/pages/result/result',

          success: function(res) {

            jilu.value.push(linkValue.value)
            uni.setStorageSync('jilu', jilu.value);
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('parse', {
              showResult:showResult.value,
              tabsheader:tabsheader.value,
              tabKey:tabKey.value,
              imageUrl: imageUrl.value,
              textinfo: textinfo.value,
              audioUrl: audioUrl.value,
              videoUrl: videoUrl.value,
              videoSize: videoSize.value
            })
          }
        })
      }


    }else{
      uni.showModal({
        title: '解析失败！',
        showCancel:false,


      });
    }


  }).catch((e) => {

    showResult.value = false;
  })

}


function clear() {
  linkValue.value = ""
}

function paste() {
  uni.getClipboardData({
    success: function (res) {
      console.log(res.data);
      linkValue.value = res.data
    }
  });
}
</script>

<style lang="less">
@main-color: #17DC73;
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  background: #f0f0f0;
  overflow: auto;
  .card{
    .card-item{
      margin-top: 30rpx;
      box-sizing: border-box;
      width: 700rpx;
      background: #fff;
      padding: 15rpx 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img{
          width: 50rpx;
          height: 50rpx;
          margin-right: 15rpx;
        }
        .img1{
          width: 36rpx;
          height: 36rpx;
          margin-right: 15rpx;
        }
        text{
          font-size: 25rpx;
        }
      }
      .img{
        width: 38rpx;
        height: 38rpx;
      }
    }

  }
  .textarea {
    width: 700rpx;
    font-size: 25rpx;
    padding: 15rpx;
    margin-top: 30rpx;
    background: #fff;
    box-sizing: border-box;
  }

  .start-parse {
    .start-parse-btn {
      width: 700rpx;
      color: #fff;


    }
  }



  .result {
    width: 700rpx;
  }




}

.smallBtn {
  width: 325rpx;
  background-color: @main-color;
  font-size: 25rpx;
  color: #fff;
  margin:0;
}

.linkopt {
  margin: 10px 0;
  width: 700rpx;
  display: flex;
  justify-content: space-between;


}



.bg1 {
  background-color: #1783dc;
}

.bg2 {
  background-color: #1783dcaa;
}

.bg3 {
  background-color: #09d50c;
}
.bg5{
  background-color: #fff;
  color:#333;
}

.textbtn{
  width: 300rpx;
  background-color: @main-color;
  font-size: 23rpx;
  color: #fff;
}
.bg4 {
  background-color: @main-color;
}

</style>
